<template>
  <view class="package" style="position: relative;" 
  v-for="(item,index) in orderLists" :key='item.id'
  @click="navTo('order/takeoutDetail?id='+item.id)" 
  >
    <view class="top"><text>单号</text><text style="margin-left: 10rpx;">{{item.order_sn}}</text></view>
    <view class="space-between top">
      <view>尾气净化液</view>
      <view>
        <text>{{item.amount}}</text>
        <text style="font-size: 26rpx;">公斤</text>
      </view>
    </view>
    <view class="space-between top">
      <view>{{item.price}}/公斤</view>
      <view>
        <text>消费金额{{item.money}}</text>
        <text style="font-size: 26rpx;">元</text>
      </view>
    </view>
    <view class="top">{{item.createtime}}</view>
    <view class="but success" v-if="item.status==='1'">{{item.status_text}}</view>
    <view class="but wait" v-else>{{item.status_text}}</view>
  </view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import { PropType } from 'vue';
  const props = defineProps({
    orderLists: {
      type: Array as PropType<Array<any>>,
    }
  });
</script>

<style scoped lang="less">
  .package:nth-of-type(1){
    margin-top: 0px;
  }
  .top{
    margin-top: 8rpx;
  }
  .but {
    position: absolute;
    padding: 2rpx 10rpx;
    box-sizing: border-box;
    top: 0px;
    right: 0px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 28rpx;
  }
  .success {
    background-color: #d8d8d8;
    color: #333;
  }
  .new {
    background-color: #fff1db;
    color: #fd9b00;
  }
  .wait {
    background-color: #dbeeff;
    color: #1b91ff;
  }
  .fillings {
    image {
      width: 350rpx;
      height: 300rpx;
    }
  
    text {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666;
      margin-top: 50rpx;
    }
  }
</style>